<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-05-12 10:08:15
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-05-12 19:09:11
 * @FilePath: /gptfront-dev/src/components/ConversationGroup/Conversation.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view>
    <view class="conversation">
      <view class="flex items-center">
        <view class="size-5 rounded-full bg-orange-700"></view>
        <view class="ml-2 text-xs">YOU</view>
      </view>
      <view class="mt-1 pl-7">
        <view class="flex gap-2 overflow-x-auto">
          <StyledImage
            v-for="(file, fIdx) in question.files?.filter((f) => f.type === 0)"
            :key="fIdx"
            :src="file.fileUrl"
            @click="handlePreviewImage(question.files, fIdx)"
          />
        </view>
        <view
          v-if="question.files?.filter((f) => f.type === 1).length > 0"
          class="flex flex-col gap-2 py-2"
        >
          <view
            v-for="(file, fIdx) in question.files?.filter((f) => f.type === 1)"
            :key="fIdx"
            class="flex items-center gap-2"
          >
            <uni-icons font-family="heroicons-outline" :size="22">
              {{ '\ue995' }}
            </uni-icons>
            <text>{{ file.fileName }}</text>
          </view>
        </view>
        <view
          class="rich-text-content select-text text-base"
          v-html="md.render(question.message ?? '')"
        />
      </view>
    </view>

    <view class="conversation">
      <view class="flex items-center">
        <view class="size-5 rounded-full bg-purple-600"></view>
        <view class="ml-2 text-xs">CHATGPT</view>
      </view>
      <view class="mt-1 pl-7">
        <view class="flex gap-2 overflow-x-auto">
          <StyledImage
            v-for="(file, fIdx) in conversation.files?.filter(
              (f) => f.type === 0,
            )"
            :key="fIdx"
            :src="file.fileUrl"
            @click="handlePreviewImage(conversation.files, fIdx)"
          />
        </view>
        <view
          v-if="conversation.files?.filter((f) => f.type === 1).length > 0"
          class="flex flex-col gap-2 py-2"
        >
          <view
            v-for="(file, fIdx) in conversation.files?.filter(
              (f) => f.type === 1,
            )"
            :key="fIdx"
            class="flex items-center gap-2"
          >
            <uni-icons font-family="heroicons-outline" :size="22">
              {{ '\ue995' }}
            </uni-icons>
            <text>{{ file.fileName }}</text>
          </view>
        </view>
        <view
          class="rich-text-content select-text text-base"
          v-html="md.render(conversation.message ?? '')"
        />
        <view class="mt-2 flex items-center gap-2">
          <view v-if="max > 1" class="flex items-center">
            <uni-icons type="left" size="16" class="pointer" @click="handlePrev()"></uni-icons>
            <view>{{ current + 1 }}/{{ max }}</view>
            <uni-icons type="right" size="16" class="pointer" @click="handleNext()"></uni-icons>
          </view>
          <uni-icons type="loop" size="22" class="pointer" @click="handleRefresh()"></uni-icons>
        </view>
      </view>
    </view>

  </view>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { md } from '@/utils/markdown'
import StyledImage from '../StyledImage.vue'

export default defineComponent({
  name: 'Conversation',
  components: {
    StyledImage,
  },
  props: {
    question: {
      type: Object,
      default: undefined,
    },
    conversations: {
      type: Object,
      default: undefined,
    },
  },
  setup(props, {emit}) {
    const current = ref(0)

    const max = computed(() => props.conversations.length)

    const conversation = computed(() => props.conversations[current.value])

    function handlePrev() {
      const result = current.value - 1
      if (result >= 0) {
        current.value = result
      }
    }
    function handleNext() {
      const result = current.value + 1
      if (result < props.conversations.length) {
        current.value = result
      }
    }

    function handleRefresh() {
      emit('sendMessage', {
        msg: props.question.message,
        files: props.question.files.map(({ url, type, fileName }) => ({
          fileUrl: url,
          type: type,
          fileName: fileName,
        })),
      })
    }

    return {
      conversation,
      handlePrev,
      handleNext,
      max,
      current,
      md,
      handleRefresh,
    }
  },
})
</script>

<style lang="scss" scoped>
.rich-text-content {
  p {
    line-height: 1.75rem;
  }
}

.conversation {
  & + .conversation {
    margin-top: 16px;
  }
}

.pointer {
  cursor: pointer;
}
</style>
